<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>人员管理</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script src="/statics/js/custom/lib.js?_V=2"></script>
</head>

<body ng-app="">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <ng-include src="'/admin/common/sidebar.html'"></ng-include>
        <!--End 左侧导航-->
        <!--头部信息-->
        <ng-include src="'/admin/common/header.html'"></ng-include>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid p-t-55">

                <!--添加-->
                <div class="modal fade bs-example-modal-lg" id="commonDiv" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" data-backdrop="static">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title" id="myModalLabel">添加</h6>
                                <div class="float-right">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                            <div class="modal-body">
                                <form action="" id="commonForm">
                                    <div class="form-group col-md-12">
                                        <input type="hidden" name="id" value="">
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="user_name">用户名</label><span class="required">
										* </span>
                                        <input type="text" class="form-control mx_required"
                                               mx_required_msg="用户名不能为空"
                                               id="user_name" name="userName" value=""
                                               placeholder="请输入用户名"/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="real_name">真实姓名</label><span class="required">
										* </span>
                                        <input type="text" class="form-control mx_required" id="real_name"
                                               name="realName" value=""
                                               placeholder="请输入真实姓名" mx_required_msg="真实姓名不能为空"/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="mobile">手机号</label><span class="required">
										* </span>
                                        <input type="text" class="form-control mx_required" id="mobile" name="mobile"
                                               value=""
                                               placeholder="请输入手机号" mx_required_msg="手机号不能为空"/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label>头像</label>
                                        <div class="form-controls">

                                            <ul class="list-inline row lyear-uploads-pic mb-0">
                                                <li class="col-6 col-md-4 col-lg-2">
                                                    <figure class="thumbnail">
                                                        <img name="photoUri" src="/statics/images/touxiang.png">
                                                        <figcaption>
                                                            <input type="file" filter=".png,.jpg,.jpeg,.bmp,.gif"
                                                                   class="fileInput" style="display: none;"
                                                                   name="file"/>
                                                            <input type="hidden" name="photoUri" class="fileresult">
                                                            <a class="btn btn-round btn-square btn-primary picUpload"
                                                               href="#!">上传</a>
                                                            <a class="btn btn-round btn-square btn-danger picDelete"
                                                               href="#!">移除</a>
                                                        </figcaption>
                                                    </figure>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="password">密码</label><span class="required">
										* </span>
                                        <input type="password" class="form-control mx_required"
                                               mx_required_msg="密码不能为空"
                                               id="password" name="password"
                                               value=""
                                               placeholder="密码"/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label>性别</label><span class="required">
										* </span>
                                        <div class="clearfix mx_required" mx_required_type="radio"
                                             mx_required_msg="请选择男女">
                                            <div class="custom-control custom-radio custom-control-inline ">
                                                <input type="radio" name="gender" id="nan"
                                                       class="custom-control-input no_clear" value="1">
                                                <label class="custom-control-label" for="nan">男</label>
                                            </div>
                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" name="gender" id="nv"
                                                       class="custom-control-input no_clear" value="2">
                                                <label class="custom-control-label" for="nv">女</label>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary mx_validator_button" id="submit">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!--重置密码-->
                <div class="modal fade bs-example-modal-lg" id="resetDio" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" data-backdrop="static">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">重置密码？</h6>
                                <div class="float-right">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                            <div class="modal-body">
                                是否确定重置密码?默认为123456
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary mx_validator_button" id="resetPass">保存
                                </button>
                                <input type="hidden" id="passwordDataId">
                            </div>
                        </div>
                    </div>
                </div>

                <!--解除冻结-->
                <div class="modal fade bs-example-modal-lg" id="lockDio" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" data-backdrop="static">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">确认解除冻结?</h6>
                                <div class="float-right">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                            <div class="modal-body">
                                <div class="form-group col-md-12">
                                    <label for="loginErrorCount">登录错误次数</label>
                                    <input type="hidden" name="id" value="">
                                    <input type="hidden" name="lastModifyTime" value="">
                                    <input type="text" class="form-control" id="loginErrorCount" name="loginErrorCount"
                                           readonly/>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="loginLockStartTime">锁定开始时间</label>
                                    <input type="text" class="form-control times" id="loginLockStartTime"
                                           name="loginLockStartTime" readonly/>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="loginLockEndTime">锁定结束时间</label>
                                    <input type="text" class="form-control times" id="loginLockEndTime"
                                           name="loginLockEndTime" readonly/>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary mx_validator_button" id="lock">解除
                                </button>
                                <input type="hidden" id="lockDataId">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="card-title">人员管理</div>
                                </header>
                                <div class="clearfix p-b-10">
                                    <form class="form-inline form-space-b" id="searchForm" method="post">
                                        <div class="mx_search p-t-10">
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150" type="text" name="userName"
                                                       placeholder="请输入用户名..">
                                            </div>
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150" type="text" name="realName"
                                                       placeholder="请输入真实姓名..">
                                            </div>
                                            <div class="form-group m-r-10">
                                                <select class="form-control form-control-select" name="disableStatus">
                                                    <option value="" selected="selected">状态</option>
                                                    <option value="0">启用</option>
                                                    <option value="1">禁用</option>
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-primary m-r-10" id="searchButton"><i
                                                        class="mdi mdi-magnify"></i> 搜索</a>
                                                <button class="btn btn-secondary m-r-10" id="resetButton"><i
                                                        class="mdi mdi-delete"></i> 重置查询
                                                </button>
                                            </div>
                                        </div>
                                        <div class="form-inline p-t-10">
                                            <a class="btn btn-primary creates" data-toggle="modal"
                                               data-target="#commonDiv" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
                                        </div>
                                    </form>
                                </div>
                                <table id="tableAjaxId">
                                </table>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>


<script type="text/javascript" src="/statics/js/apis/user.js"></script>
<script type="text/javascript" src="/statics/js/custom/table.js?_v=1.1"></script>
<script type="text/javascript">

    var tableDom = $("#tableAjaxId");
    $(function () {
        Table.builder()
            .listUrl(USER_LIST)
            .createUrl(USER_CREATE)
            .detailUrl(USER_DETAIL)
            .deleteUrl(USER_DELETE)
            .statusUrl(USER_STATUS)
            .init();

        //重置密码
        tableDom.on("click", ".reset1", function () {
            $("#passwordDataId").val($(this).attr("dataId"))
            $("#passwordDataId").attr("lastModifyTime", $(this).attr("lastModifyTime"))
        })

        $("#resetPass").on("click", function () {
            var id = $("#passwordDataId").val();
            var lastModifyTime = $("#passwordDataId").attr("lastModifyTime");
            var url = USER_RESET_PASSWORD + "/" + id;
            Request.builder()
                .url(url)
                .data({"lastModifyTime": lastModifyTime})
                .callback(function (e) {
                    if (e.code === "00000") {
                        LayerUtil.successMsg('操作成功~');
                        setTimeout(function () {
                            tableDom.bootstrapTable('refresh');
                            $("#resetDio").find(".close").trigger("click");
                        }, 1000)
                    } else {
                        LayerUtil.failMsg(e.msg != null ? e.msg : ERROR_MSG.FAIL);
                    }
                }).post();
        });

        //解除冻结
        $("#tableAjaxId").on("click", ".lock", function () {
            var id = $(this).attr("dataId");
            var url = USER_DETAIL + "/" + id;
            Request.builder()
                .url(url)
                .callback(function (e) {
                    if (e.code === "00000") {
                        Form.setValues($("#lockDio"), e.data);
                    } else {
                        LayerUtil.failMsg(e.msg != null ? e.msg : ERROR_MSG.FAIL);
                    }
                }).get();
        })

        $("#lock").on("click", function () {
            var id = $("#lockDio").find("input[name=id]").val();
            var lastModifyTime = $("#lockDio").find("input[name=lastModifyTime]").val();
            var url = USER_UNLOCK + "/" + id;
            Request.builder()
                .url(url)
                .data({"lastModifyTime": lastModifyTime})
                .callback(function (e) {
                    if (e.code === "00000") {
                        LayerUtil.successMsg('操作成功~');
                        setTimeout(function () {
                            tableDom.bootstrapTable('refresh');
                            $("#lockDio").find(".close").trigger("click");
                        }, 1000)
                    } else {
                        LayerUtil.failMsg(e.msg != null ? e.msg : ERROR_MSG.FAIL);
                    }
                }).post();
        });
    });

    columns = [
        {
            field: 'photoUri',
            title: '头像',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return Table.initPic(value);
            }
        }, {
            field: 'userName',
            title: '用户名',
            align: 'center',
            valign: 'middle'
        }, {
            field: 'realName',
            title: '姓名',
            align: 'center',
            valign: 'middle'
        }, {
            field: 'disableStatus',
            title: '状态',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return Table.initSwitch(value, 0, 1, row);
            }
        }, {
            field: 'loginLockStatus',
            title: '冻结状态',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "冻结";
                } else {
                    return "未知";
                }
            }
        }, {
            field: 'roleName',
            title: '角色名称',
            align: 'center',
            valign: 'middle'
        }, {
            field: 'createTime',
            title: '创建时间',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return DateUtil.changeDateToString(new Date(value));
            }
        }, {
            title: "操作",
            align: 'center',
            valign: 'middle',
            width: 260,
            formatter: option
        }
    ]

    function option(value, row, index) {
        var html = '<a class="btn btn-xs btn-default m-r-5 reset1" data-toggle="modal" data-target="#resetDio" lastModifyTime="' + row.lastModifyTime + '" dataId="' + row.id + '" title="重置密码" >重置密码</a>';
        if (row.loginLockStatus === 1) {
            html += '<a class="btn btn-xs btn-default m-r-5 lock" data-toggle="modal" data-target="#lockDio" lastModifyTime="' + row.lastModifyTime + '"  dataId="' + row.id + '" title="解冻" >解除冻结</a>';
        }
        html += ' <a class="btn btn-xs btn-default" href="/security/user/role.html?id=' + row.id + '" title="角色列表">角色列表</a>';
        return html;

    }
</script>
</body>
</html>
